<template lang="html">
	<div class="header-top">
		<div class="container">
			<div class="logo">
				<router-link :to="{ path: '/', params: {} }">
					<img src="@/components/common/images/text-logo.png" alt="">
				</router-link>
			</div>
			<div class="navList" :class="{'searchHidden': $route.path !== '/'}">
				<div class="nav"  @click="homeClick()" >
					<img src="@/components/common/images/home.png" alt="">
				</div>
				<div class="nav" id="id-nav-search"@click="searchClick()" v-if="$route.path === '/'">
					<img src="@/components/common/images/search.png" alt="">
				</div>
			</div>
		</div>



	</div>
</template>

<script>
export default {
	data() {
		return {
			isSearch: false,
			navList: [
				// {
				// 	path: '/',
				// 	img: '@/components/common/images/user.png'
				// },
				// {
				// 	path: '/',
				// 	img: '@/components/common/images/home.png'
				// },
				// {
				// 	path: '//microTool/sectionQuery',
				// 	img: '@/components/common/images/search.png'
				// },
			]
		}
	},
	created() {
		$('#id-nav-search').on('click', function() {
			setTimeout(function() {
				$('#id-input-search').focus()
			}, 100)
		})
	},
	methods: {
		homeClick(n, index) {
			this.$router.push({
				path: '/'
			})
		},
		searchClick() {
			this.isSearch = !this.isSearch
			// this.$emit('search', this.isSearch)
			this.$store.commit('isSearchSave', this.isSearch)
			this.log('store isSearch', this.$store.state.isSearch)
		},
	},
	components: {

	},
	watch: {
		// '$route': () => {
		// 	this.log('监听了路由')
		// }
	}

}
</script>

<style lang="scss" scoped>
	@import '../common/base.scss';
	.header-top {
		position: relative;
		// margin-bottom: 20px;
		border-bottom: 3px solid #fff;
		.container {
			height: 80px;
			display: flex;
			text-align: center;
			position: relative;
			.logo {
				position: relative;
				left: 20px;
				z-index: 100;
				img {
					height: 60px;
					position: absolute;
					@include vetically();
					z-index: 100;
				}
			}
			.navList {
				display: flex;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 300px;
				.nav {
					flex:1;
					height: 40px;

					img {
						height: 100%;
					}
				}
			}
			.searchHidden {
				width: 150px;
				// background: red;
			}
		}
	}
	.nav + .nav {
		border-left:  1px solid #909090;
	}

</style>
